<template>
	<view class="filtrate_dropdown">
		<view class="filtrate_box">
			<view class="" v-for="item in navList" :key='item.id' @click="handleFil(item.id)">
				<text :class="{'color_sel':selectType == item.id}">{{item.text}}</text>
				<image src="/static/coment/pulldown.svg" mode="" class="pull_icon"
					:class="{'turn_icon':selectType == item.id}"></image>
			</view>
		</view>
		<view class="dropdown_box" v-if="selectType > 0">
			<view class="content_adderss" v-if="selectType == 1">
				<scroll-view class="city" scroll-y :show-scrollbar='false'>
					<view class="region_item select_item">
						{{baseData.name}}
					</view>
				</scroll-view>
				<scroll-view class="area" scroll-y :show-scrollbar='false'>
					<view class="region_item" :class="{'select_item':item.id == selectIdObj.areaId}"
						v-for="(item,index) in districtList" :key="index" @click="handleArea(item.id)">
						{{item.fullname}}
					</view>

				</scroll-view>
				<!-- <scroll-view class="street" scroll-y :show-scrollbar='false'>
					<view class="region_item str_item" :class="{'select_item':selectIdObj.streetId == item.id}"
						@click="handleStreet(item.id,index)" v-for="(item,index) in streetList" :key="index">
						<text>{{item.fullname}}</text>
						<uni-icons type="checkmarkempty" size="16" v-if="selectIdObj.streetId == item.id"
							color="#EE7930"></uni-icons>
						<uni-icons type="checkmarkempty" size="16" v-else color="#FFF"></uni-icons>
					</view>
				</scroll-view> -->

			</view>

			<view class="content" v-if="selectType == 2">
				<view class="label" v-for="(item,index) in dropdownList.roomtypes" :key="index"
					:class="{'select_label':index == selectIdObj.typeId}" @click="hlandleClick(index,'typeId')">
					{{item.valueName}}
				</view>
			</view>
			<view class="" v-if="selectType == 3">
				<view class="content gapcolumns">
					<view class="label" v-for="(item,index) in rentList" :key="index"
						:class="{'select_label':index == selectIdObj.rentId}" @click="hlandleClick(index,'rentId')">
						{{item.name}}
					</view>

				</view>
				<view class="pricelist">
					<!-- <text class="title">租金范围</text> -->
					<input type="digit" v-model="selectIdObj.priceStar" placeholder="请输入开始租金" class="price_input" />
					<span style="margin: 0 16rpx;">~</span>
					<input type="digit" v-model="selectIdObj.priceEnd" placeholder="请输入结束租金" class="price_input" />
					<!-- :disabled="!selectIdObj.priceStar" -->
					<span style="font-size: 24rpx; padding-left: 16rpx;">元</span>
				</view>
			</view>
			<!-- <view class="slider_box">
				<view class="slider_value">不限</view>
				<view class="">
					<slider value="60" @change="sliderChange" step="5" show-value />
					</view>
				</view> -->

			<view style="padding: 50rpx 0;" v-if="selectType == 4">
				<picker mode="date" @change="changeStarDate">
					<view class="list">
						<text class="title">可租开始时间</text>
						<input type="text" v-model="selectIdObj.starDate" placeholder="请选择" disabled />
						<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
							class="more_icon"></image>
					</view>
				</picker>
				<picker mode="date" @change="changeEndDate">
					<view class="list">
						<text class="title">可租结束时间</text>
						<input type="text" v-model="selectIdObj.endDate" placeholder="请选择" disabled />
						<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
							class="more_icon"></image>
					</view>
				</picker>
			</view>
			<view class="btn_box">
				<view class="left" @click="handleReset">
					重置
				</view>
				<view class="rigth" @click="handleConfirm">
					确定
				</view>
			</view>
		</view>
		<view class="cover" v-if="selectType != 0" @click="handleClear"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watchEffect
	} from 'vue'
	import {
		getRoomtypes
	} from '../api/home.js';
	import {
		navList,
		rentList,
		baseData
	} from './list.js'
	import {
		onMounted
	} from 'vue';
	import {
		getchildrenData
	} from './getCityData.js'
	import http from '../../../uitls/http.js';
	const dropdownList = reactive({
		roomtypes: [],

	})
	const emit = defineEmits(['confirmData']);
	//记录选中对象
	const selectIdObj = reactive({
		typeId: -1, //房型
		rentId: -1, //租金
		starDate: '', //时间
		endDate: '',
		areaId: '', //区域
		streetId: '',
		priceStar: '',
		priceEnd: ''
	})
	const selectType = ref(0)
	//确定选中下标
	const hlandleClick = (index, type) => {
		selectIdObj[type] = index
		if (type == 'rentId') {
			selectIdObj.priceStar = ''
			selectIdObj.priceEnd = ''
		}
	}
	//获取时间
	const changeStarDate = (e) => {
		selectIdObj.starDate = e.target.value
	}
	const changeEndDate = (e) => {
		selectIdObj.endDate = e.target.value
	}
	watchEffect(() => {
		if (selectIdObj.priceStar || selectIdObj.priceEnd) {
			selectIdObj.rentId = -1
		}

		// if(selectIdObj.priceStar > selectIdObj.priceEnd){
		// 	selectIdObj.priceEnd = ''
		// 	http.isMssage('结束金额不能比开始小哦')
		// }
	})
	//切换类型
	const handleFil = (id) => {
		if (selectType.value == id) {
			selectType.value = 0
			return false
		}
		selectType.value = id
	}
	//关闭
	const handleClear = () => {
		selectType.value = 0
	}
	const handleReset = () => {
		selectIdObj.typeId = -1
		selectIdObj.rentId = -1
		selectIdObj.starDate = ''
		selectIdObj.endDate = ''
		selectIdObj.areaId = ''
		selectIdObj.streetId = ''
		selectIdObj.priceEnd = ''
		selectIdObj.priceStar = ''
		emit('confirmData', {})
	}
	const allItm = {
		valueId: "",
		valueName: "全部"
	}
	const streetList = ref([])
	const districtList = ref([])
	//区域选择事件
	const handleArea = (id) => {
		streetList.value = []
		selectIdObj.areaId = id
		selectIdObj.streetId = ''
		// getCityData(id)
	}
	//街道选择事件
	const handleStreet = (id) => {
		selectIdObj.streetId = id
		// let list = selectIdObj.streetIdList||[]
		// let index = list.indexOf(id)
		// if(index>-1){
		// 	list.splice(index, 1);
		// }else{
		// 	list.push(id)
		// }
		// selectIdObj.streetIdList = list
	}
	//确定事件并返回值
	const handleConfirm = () => {
		handleClear()
		// selectIdObj
		// 区域的值
		let areaValue = selectIdObj.areaId || ''
		// 街道
		// let streetData = selectIdObj.streetId
		//房型
		let roomValue = dropdownList.roomtypes[selectIdObj.typeId] || {}
		//租金

		let rentValue = rentList[selectIdObj.rentId] || {}
		// selectIdObj.rentId == -1 &&
		if (selectIdObj.priceEnd && selectIdObj.priceStar) {
			rentValue = {
				end: selectIdObj.priceEnd,
				star: selectIdObj.priceStar
			}
		}
		//起租日期
		let starDateValue = selectIdObj.starDate || ''

		let endDateValue = selectIdObj.endDate || ''

		let params = {
			areaValue,
			// streetData,
			roomValue,
			rentValue,
			starDateValue,
			endDateValue
		}
		// console.log('params',params)
		let paramsData = {
			regionCode: areaValue,
			// district: streetData,
			availableEndTime: endDateValue,
			availableStartTime: starDateValue,
			priceEnd: rentValue.end,
			priceStart: rentValue.star,
			roomTypeId: roomValue.valueId || ''
		}
		// console.log('paramsData',paramsData)
		emit('confirmData', paramsData)
	}
	const getCityData = async (id) => {
		console.log('id===', id)
		let res = await getchildrenData(id)
		if (id) {
			streetList.value = res[0]

		} else {
			districtList.value = res[0]
		}

		console.log('===', res[0])
	}
	onMounted(() => {
		getRoomtypes().then(res => {
			if (res.data.code == 0) {
				let list = res.data.data
				list.unshift(allItm)
				dropdownList.roomtypes = list
			}
		})
		getCityData()
	})
</script>

<style lang="less" scoped>
	.filtrate_dropdown {
		position: relative;

		.filtrate_box {
			background: #FFFFFF;
			display: flex;
			text-align: center;
			justify-content: space-around;

			font-size: 32rpx;
			margin-bottom: 32rpx;

			.pull_icon {
				margin-left: 16rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.color_sel {
				color: #EE7930;
				// font-size: 36rpx;
				font-weight: bold;
			}

			.turn_icon {
				transform: rotate(180deg) scale(1);
			}
		}

		.dropdown_box {
			position: absolute;
			left: 0;
			top: 50rpx;
			// height: 100rpx;
			width: 100%;
			background: #FFFFFF;
			border-top: 1rpx solid #F6F6F6;
			z-index: 10000;

			.content {
				padding: 30rpx;
				// display: flex;
				// flex-wrap: wrap;
				// // justify-content: space-around;
				// align-items: center;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 16rpx;

				.label {
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					padding: 24rpx 0;
					// margin-bottom: 30rpx;
					// margin-right: 22rpx;
					border: 1rpx solid #e3e4e5;
					border-radius: 8rpx;
					text-align: center;
					// height: 100rpx;
					// line-height: 100rpx;

				}

				.select_label {
					background: #F8D648;
					color: #FFFFFF;
					border: 1rpx solid #F8D648;
				}
			}

			.gapcolumns {
				grid-template-columns: 1fr 1fr 1fr;

			}

			.pricelist {
				// width: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				margin-bottom: 32rpx;

				.title {
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					width: 140rpx;
					text-align: left;
				}

				.price_input {
					font-size: 24rpx;
					border: 1rpx solid #ddd;
					height: 84rpx;
					line-height: 84rpx;
					border-radius: 12rpx;
					padding-left: 12rpx;
					width: 240rpx;
				}
			}

			.slider_box {

				padding-bottom: 30rpx;

				.slider_value {
					text-align: center;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.btn_box {
				display: flex;
				font-size: 24rpx;
				box-shadow: 5rpx 5rpx 10rpx rgba(204, 204, 204, 1);

				.left {
					width: 30%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}

				.rigth {
					width: 70%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #FFFFFF;
					background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
				}
			}

			.content_adderss {
				display: flex;

				.city {
					// text-align: left;
					height: 600rpx;
					width: 200rpx;
					background: #ddd;
					// border-right: 1rpx solid #F6F6F6;
				}

				.area {
					height: 600rpx;
					// width: 200rpx;
					background: #eee;
					// border-left: 1rpx solid #F6F6F6;
				}

				.street {
					flex: 1;
					height: 600rpx;
					background: #fff;
				}

				.region_item {
					font-size: 28rpx;
					color: #333333;
					padding: 30rpx 0;
					text-align: center;
					// border-bottom: 1rpx solid #F6F6F6;
				}

				.str_item {
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.select_item {
					color: #EE7930;

				}
			}
		}

		.list {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 30rpx;
			background: #FFFFFF;
			position: relative;

			.title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
				width: 180rpx;
				text-align: left;
			}

			input {
				font-size: 28rpx;
			}

			.more_icon {
				position: absolute;
				right: 30rpx;
				top: 34rpx;
				width: 18rpx;
				height: 36rpx;
			}
		}

		.cover {
			position: absolute;
			left: 0;
			top: 50rpx;
			height: calc(100vh - 330rpx);
			width: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			/* 半透明黑色 */
			z-index: 100;
		}
	}
</style>